<template>
  <div>
    <!-- 个人中心 -->
    <div class="self">
      <div class="header">
        <div class="top">
          <div class="one">
            <router-link to="/login" tag="div" class="imgs" href="注册.html"
              ><img src="../assets/imgs/头像.jpg" alt=""
            /></router-link>
            <div class="info">
              <div class="phone">
                林凯琦
                <div class="mbphone">
                  <img src="../assets/imgs/phone.jpg" alt="" />
                </div>
              </div>
              <div class="wall">勋章墙 &nbsp;&nbsp;&gt;</div>
            </div>
          </div>
          <div class="two">
            <div class="pdfx">
              <span class="imgs"
                ><img src="../assets/imgs/红包.jpg" alt=""
              /></span>
              <span class="wenzi">拼单返现</span>
            </div>
          </div>
        </div>
        <div class="under">
          <div class="left">省钱月卡</div>
          <div class="right">
            <div class="baoguo">你有124元卷未领取</div>
            <span style="color: red; font-size: 16px">&gt;</span>
          </div>
        </div>
      </div>
      
      <div class="dingdan">
        <div class="no1">我的订单</div>
        <router-link tag="div" to="/myord" class="no2" href="../assets/我的订单.html">查看全部&gt;</router-link>
      </div>
      <div class="dingdanfw">
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/待付款.png" alt="" /></div>
          <div class="car">待付款</div>
        </div>
        <router-link tag="div" to="/myord" class="items">
          <div class="imgs"><img src="../assets/personimgs/待分享.png" alt="" /></div>
          <div class="car">待分享</div>
        </router-link>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/待发货.png" alt="" /></div>
          <div class="car">待发货</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/待收货.png" alt="" /></div>
          <div class="car">待收货</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/评价.png" alt="" /></div>
          <div class="car">评价</div>
        </div>
      </div>
      <div class="ooo"></div>
      <!-- 店铺关注 -->
      <div class="love">
        <div class="items">
          <div class="imgs">
            <img src="../assets/personimgs/优惠卷.png" alt="" />
          </div>
          <div class="wenzi">优惠卷</div>
        </div>
        <router-link tag="div" to="/likes" class="items">
          <div class="imgs">
            <img src="../assets/personimgs/商品收藏.png" alt="" />
          </div>
          <div class="wenzi">商品收藏</div>
        </router-link>
        <div class="items">
          <div class="imgs">
            <img src="../assets/personimgs/店铺关注.png" alt="" />
          </div>
          <div class="wenzi">店铺关注</div>
        </div>
        <div class="items">
          <div class="imgs">
            <img src="../assets/personimgs/历史浏览.png" alt="" />
          </div>
          <div class="wenzi">历史浏览</div>
        </div>
        <div class="items">
          <div class="imgs">
            <img src="../assets/personimgs/退款售后.png" alt="" />
          </div>
          <div class="wenzi">退款售后</div>
        </div>
      </div>
      <div class="ooo"></div>
      <div class="more">
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/多多果园.png" alt="" /></div>
          <div class="wenzi">多多果园</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/现金大转盘.png" alt="" /></div>
          <div class="wenzi">现金大转盘</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/天天领现金.png" alt="" /></div>
          <div class="wenzi">天天领现金</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/多多爱消除.png" alt="" /></div>
          <div class="wenzi">多多爱消除</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/多多牧场.png" alt="" /></div>
          <div class="wenzi">多多牧场</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/黑卡抵扣金.png" alt="" /></div>
          <div class="wenzi">黑卡抵扣金</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/火车票.png" alt="" /></div>
          <div class="wenzi">火车票</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/收货地址.png" alt="" /></div>
          <div class="wenzi">收货地址</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/官方客服.png" alt="" /></div>
          <div class="wenzi">官方客服</div>
        </div>
        <div class="items">
          <div class="imgs"><img src="../assets/personimgs/设置.png" alt="" /></div>
          <div class="wenzi">设置</div>
        </div>        
      </div>
      <div class="ooo"></div>
      <!-- 精选推荐 -->
      <div class="tuijian">
        <div class="tp"><img src="../assets/imgs/精选推荐.jpg" alt="" /></div>
        <div class="wenzi" style="margin-left: 12px">精选推荐</div>
      </div>
      <div class="ooo"></div>
      <div class="container">
        <div class="dalei" >
          <router-link tag="div" :to="'/show?id='+item.id" class="items" v-for="(item,index) in homelists" :key="index">
            <div class="imgs">
              <img :src="item.sptimgs" alt="" />
            </div>
            <div class="title"><p>{{item.titles}}</p></div>
            <div class="show">
              <p>{{item.isea}}</p>
            </div>
            <div class="money">
              <span class="qian">{{item.qianq}}</span>{{item.qianh}}
              <span class="hou">{{item.hou}}</span>
            </div>
          </router-link>
        </div>
      </div>
      <div class="selfooo"></div>
    </div>

    <!-- 切换 -->
    <div class="dibu">
      <router-link tag="a" to="/home" class="items">
        <img src="../assets/imgs/白首页.webp" alt="" />
        <p>首页</p>
      </router-link>
      <router-link tag="a" to="/video" class="items">
        <img src="../assets/imgs/直播.webp" alt="" />
        <p>直播</p>
      </router-link>
      <router-link tag="a" to="/newsele" class="items">
        <img src="../assets/imgs/分类.webp" alt="" />
        <p>分类</p>
      </router-link>
      <router-link tag="a" to="/talk" class="items">
        <img src="../assets/imgs/聊天.webp" alt="" />
        <p>聊天</p>
      </router-link>
      <router-link tag="a" to="/person" class="items">
        <img src="../assets/imgs/个人中心.webp" alt="" />
        <p>个人中心</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
   props:["homelists"],
   data(){
    return{

    }
   },
   methods:{
    // 接收id
        getDataFun(id){
            let index = this.homelists.findIndex(item=>item.id==id);
            this.lists=this.homelists[index];
            console.log(this.lists)
        }
   },
   created(){
        console.log(this.$route.query.id);
        this.getDataFun(this.$route.query.id)
    }
}
</script>

<style>
.self .nonedl{
  width: 100%;
  height: 100px;
  background-color: red;
}
.selfooo {
  width: 100%;
  height: 76px;
  /* background-color: red; */
}
.self .header {
  width: 92%;
  height: 138px;
  margin-left: 17px;
  display: flex;
  flex-wrap: wrap;
  /* background-color: red; */
}
.self .header .top {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.self .header .one {
  width: 153px;
  height: 95px;
  /* background-color: #000; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.self .header .two {
  width: 98px;
  height: 95px;
  /* background-color: red; */
  display: flex;
  align-items: center;
}
.self .header .one .imgs {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}
.self .header .imgs img {
  width: 100%;
}
.self .header .info {
  width: 80px;
  height: 74px;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  color: #000;
  /* background-color: aqua; */
  
}
.self .header .mbphone {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  display: inline-block;
}
.self .header .mbphone img {
  width: 100%;
}
.self .header .wall {
  font-size: 12px;
  color: #949392;
}
.self .pdfx {
  width: 98%;
  height: 30px;
  /* background-color: #000; */
  border: 2px solid #eaeaea;
  border-radius: 15px;
}
.self .pdfx .imgs {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  margin-top: 5px;
}
.self .pdfx .imgs img {
  width: 100%；;
}
.self .pdfx .wenzi {
  width: 90px;
  color: #000;
  font-size: 12px;
}
.self .under {
  width: 100%;
  height: 45px;
  border-radius: 5px 5px 0 0;
  background-color: #fdefee;
  display: flex;
  justify-content: space-between;
}
.self .under .left {
  width: 84px;
  height: 45px;
  display: flex;
  /* background-color: red; */
  font-size: 14px;
  justify-content: center;
  text-align: center;
  line-height: 45px;
  color: red;
}
.self .under .right {
  width: 169px;
  height: 45px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /* background-color: green; */
}
.self .under .right .baoguo {
  background-color: red;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: 130px;
  height: 26px;
  border-radius: 13px;
  line-height: 26px;
}
.self .dingdan {
  display: flex;
  width: 92%;
  height: 54px;
  margin-left: 17px;
  justify-content: space-between;
  background-color: #fff;
}
.self .dingdan .no1 {
  font-size: 16px;
  text-align: left;
  line-height: 54px;
  font-weight: 500;
  color: #000;
}
.self .dingdan .no2 {
  display: block;
  line-height: 54px;
  text-align: right;
  color: #8d8c8a;
}
.self .dingdanfw {
  display: flex;
  width: 92%;
  margin-left: 17px;
  height: 75px;
  background-color: #fff;
}
.self .dingdanfw .items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex: 1;
  font-size: 14px;
  color: #424242;
}
.self .dingdanfw .items .imgs {
  width: 27px;
  height: 27px;
}
.self .dingdanfw .items .imgs img {
  width: 100%;
}
.self .love {
  width: 92%;
  margin-left: 17px;
  background-color: #fff;
  height: 104px;
  display: flex;
}
.self .ooo {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
}
.self .love .items {
  display: flex;
  color: #686868;
  font-size: 14px;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.self .love .items .imgs {
  width: 28px;
  height: 28px;
}
.self .love .items .imgs img {
  width: 100%;
}
.self .more {
  display: flex;
  width: 100%;
  height: 167px;
  flex-wrap: wrap;
  font-size: 12px;
  background-color: #fff;
}
.self .more .items {
  width: 75px;
  height: 75px;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.self .more .items .imgs {
  width: 27px;
  height: 27px;
}
.self .more .items .imgs img {
  width: 100%;
}
.self .tuijian {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff1c24;
  font-size: 16px;
}
.self .tuijian .tp {
  width: 18px;
  height: 18px;
}
.self .tuijian .tp img {
  width: 100%;
}



.self  .dalei {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #efeeeb;
}
.self  .dalei .items {
  display: block;
  width: 48%;
  height: 255px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  justify-content: space-around;
}
.self  .dalei .items .imgs {
  width: 180px;
  height: 180px;
}
.self  .dalei .items .imgs img {
  width: 100%;
}
.self  .dalei .items p {
  font-size: 14px;
  color:#000;
  text-align: left;
}
.self  .dalei .items .money {
  color: red;
  font-size: 10px;
  text-indent: 1em;
}
.self  .dalei .items .qian {
  font-size: 14px;
}
.self  .dalei .items .hou {
  font-size: 14px;
  color: #888888;
}
</style>